import 'package:flutter/material.dart';
import 'package:flutter_component_pay/src/models/abs_third_channel.dart';
import 'package:flutter_component_pay/src/theme.dart';
import 'package:flutter_component_pay/src/widgets/abs_third_pay_buttons.dart';
import 'package:flutter_component_pay/src/widgets/abs_third_pay_item.dart';
import 'package:flutter_component_pay/src/widgets/abs_third_pay_title.dart';
import 'package:flutter_component_pay/src/widgets/abs_third_pay_price.dart';

/* 
 * 第三方支付样式小部件
 */
class AbsThirdPayView extends StatefulWidget {
  /// 总金额
  final double price;

  /// 第三方支付通道列表
  final List<AbsThirdChannel> payChannels;

  /// 点击某个支付事件
  final ValueChanged<AbsThirdChannel>? onPay;

  /// close事件
  final VoidCallback? onClose;

  /// 点击底部左侧按钮事件
  final ValueChanged<AbsThirdChannel?>? onBottomLeftEvent;

  /// 点击底部右侧按钮事件
  final ValueChanged<AbsThirdChannel?>? onBottomRightEvent;

  const AbsThirdPayView({
    super.key,
    required this.price,
    required this.payChannels,
    this.onPay,
    this.onClose,
    this.onBottomLeftEvent,
    this.onBottomRightEvent,
  });

  @override
  State<AbsThirdPayView> createState() => _AbsThirdPayViewState();
}

class _AbsThirdPayViewState extends State<AbsThirdPayView> {
  late final ValueNotifier<List<AbsThirdChannel>> _notifier;
  late AbsThirdChannel? _currentChannel;

  @override
  void initState() {
    _notifier = ValueNotifier(widget.payChannels);
    // 获取默认选择支付方式
    for (var element in widget.payChannels) {
      if (element.way == AbsPayTheme.defaultPayWay) {
        _currentChannel = element;
        break;
      }
    }
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: AbsPayTheme.sheetBackgroudColor,
      child: Column(
        children: [
          /// 标题小部件
          Container(
            margin: const EdgeInsets.only(bottom: 40),
            child: AbsThirdPayTitleView(
              onClose: () {
                widget.onClose?.call();
                Navigator.of(context).pop();
              },
            ),
          ),

          /// 总金额小部件
          Container(
            margin: const EdgeInsets.only(bottom: 23),
            child: AbsThirdPayPriceView(price: widget.price),
          ),

          /// 分割线
          const Divider(
            color: Color(0xffe5e5e5),
            indent: 13,
            endIndent: 11,
            height: 0,
            thickness: 0.5,
          ),

          /// 支付通道列表
          Expanded(
            child: ValueListenableBuilder(
              valueListenable: _notifier,
              builder: (context, list, child) => ListView.separated(
                shrinkWrap: true,
                padding: EdgeInsets.zero,
                physics: const NeverScrollableScrollPhysics(),
                itemCount: list.length,
                separatorBuilder: (context, index) => child!,
                itemBuilder: (context, index) => AbsThirdPayItemView(
                  channel: list[index],
                  onPay: (value) {
                    // 回调出去
                    widget.onPay?.call(value);
                    // 更新数据，并刷新UI
                    if (_currentChannel?.way != value.way) {
                      final resetList = list.map((element) {
                        if (element.way == value.way) {
                          element.isSelected = true;
                          _currentChannel = element;
                        } else {
                          element.isSelected = false;
                        }
                        return element;
                      }).toList();
                      // 更新
                      _notifier.value = resetList;
                    }
                  },
                ),
              ),
              child: const Divider(
                color: Color(0xffe5e5e5),
                height: 0,
                thickness: 0.5,
                indent: 13,
                endIndent: 11,
              ),
            ),
          ),

          /// 底部按钮
          AbsThirdPayButtonsView(
            onLeftEvent: () => widget.onBottomLeftEvent?.call(_currentChannel),
            onRightEvent: () => widget.onBottomRightEvent?.call(_currentChannel),
          ),
        ],
      ),
    );
  }
}
